<template>
  <div>
    <!-- 没有图片 -->
    <van-cell
      @click="getArticleItem(articleInfo.art_id)"
      v-if="type === 0"
      :title="articleInfo.title"
      :label="label"
    />
    <!-- 一张图片 -->
    <van-cell
      @click="getArticleItem(articleInfo.art_id)"
      v-else-if="type === 1"
      :title="articleInfo.title"
      :label="label"
    >
      <van-image width="100" height="100" :src="articleInfo.cover?.images[0]" />
    </van-cell>
    <!-- 三张图片 -->
    <van-cell
      @click="getArticleItem(articleInfo.art_id)"
      v-else
      :title="articleInfo.title"
    >
      <template #label>
        <van-image
          v-for="(item, index) in articleInfo.cover?.images"
          :key="index"
          :src="item"
          width="100"
          height="100"
        />
      </template>
    </van-cell>
  </div>
</template>

<script>
import dayjs from '@/utils/day'
import { enterArticlesAPI } from '@/api'
import { mapMutations, mapState } from 'vuex'
import { addComment } from '@/api/comment'

export default {
  name: 'ArticleItem',
  props: {
    articleInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      enterArticle: {}
    }
  },
  computed: {
    ...mapState(['allComments']),
    type() {
      return this.articleInfo.cover?.type
    },
    label() {
      const { aut_name, pubdate, comm_count } = this.articleInfo
      return `${aut_name} ${comm_count}评论 ${dayjs(pubdate).fromNow()}`
    }
  },
  methods: {
    ...mapMutations(['SET_ARTICLES', 'SET_ALL_COMMENTS']),
    async getArticleItem(id) {
      const { data } = await enterArticlesAPI(id)
      console.log(data)
      this.enterArticle = data.data
      this.SET_ARTICLES(this.enterArticle)
      this.$router.push(`/detail/${id}`)
      const res = await addComment({
        type: 'a',
        source: this.enterArticle.art_id,
        limit: 99999999999999
      })
      this.SET_ALL_COMMENTS(res.data.data.results)
    }
  }
}
</script>

<style scoped lang="less"></style>
